<script setup>
import { io } from "socket.io-client";
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'

let socket = null

let rightId = JSON.parse(localStorage.getItem('user'))._id // 发送的peerId
let leftId = JSON.parse(localStorage.getItem('ele'))._id // 接收的peerId

let rightVal = ref('') // 输入信息
const chatList = ref([]) // 聊天记录列表
const userList = ref([])
const router = useRouter()
const ele = JSON.parse(localStorage.getItem('ele'))


const goTochatTool = () => {
    router.push('/chattool')
}

onMounted(() => {
    //随机生成一个username
    socket = io("http://localhost:3000", {
        query: {
            username: JSON.parse(localStorage.getItem('user')).name,
            elename: JSON.parse(localStorage.getItem('ele')).name
        },//接受者
    });
    socket.on('connect', () => {//点击连接按钮触发
        console.log('连接成功')
    })
    // socket.emit("list")
    socket.on("disconnect", () => {
        console.log('断开连接'); // undefined
    });

    socket.on("userList", (arr) => {
        userList.value = arr//点击连接按钮触发 生成的userList列表传递过来
    })
    socket.on("list", (arr) => {
        chatList.value = arr
        localStorage.setItem('chatList', JSON.stringify(chatList.value))

    })
    socket.on("chatList", (arr) => {
        chatList.value = arr
        localStorage.setItem('chatList', JSON.stringify(chatList.value))
    })
})


// 发送信息
const sendMessage = () => {
    //发送信息
    const obj = {
        rightId, //发送者
        leftId, //接收者
        rightName: JSON.parse(localStorage.getItem('user')).name, //发送者名字
        leftName: JSON.parse(localStorage.getItem('ele')).name, //接收者名字
        rightImg: JSON.parse(localStorage.getItem('user')).avatar, //发送者头像
        leftImg: JSON.parse(localStorage.getItem('ele')).avatar, //接收者头像
        rightVal: rightVal.value, //发送内容
        //时间
        time: new Date(),
        id: userList.value[0].id
    }
    socket.emit("sendMessage", obj)
    socket.on("list", (arr) => {
        chatList.value = arr
    })
    rightVal.value = ''
}


</script>

<template>

    <div class="titles">
        <img id="back" @click="router.push('/nav/messagelist')" src="@/assets/chattool/back.png" alt="">
        <p>{{ ele.name }}</p>
        <img id="threedian" src="@/assets/chattool/threedian.png" alt="">
    </div>
    <div class="content">
        <div v-for="item in chatList" :key="item._id" class="list1">
            <div v-for="ele in item.chatContent" :key="ele._id" class="list2">
                <div class="block">
                    <div class="r">
                        <div class="right" v-show="ele.status">
                            <span>{{ ele.val }}</span>
                            <img :src="item.rightAvatar" alt="">
                        </div>
                    </div>
                    <div class="l">
                        <div class="left" v-show="!ele.status">
                            <img :src="item.leftAvatar" alt="">
                            <span>{{ ele.val }}</span>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <div id="input">
        <!-- 输入框 -->
        <input v-model="rightVal" type="text" />
        <div id="btn"><el-button @click="sendMessage">发送</el-button></div>
        <img @click="goTochatTool" src="@/assets/chattool/riLine.png" alt="">

    </div>


</template>

<style scoped lang="less">
.titles {
    position: relative;
    width: 390px;
    height: 44px;
    line-height: 26px;
    background-color: rgba(239, 239, 239, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 18px;
    text-align: center;
    font-family: Roboto;
    border: 0px solid rgba(232, 232, 232, 1);

    #back {
        position: absolute;
        left: 4px;
        top: 10px;
        width: 24px;
        height: 24px;

    }

    #button20 {
        position: absolute;
        left: 28px;
        top: 13px;
        width: 29px;
        height: 18px;
        line-height: 17px;
        border-radius: 100px;
        background-color: rgba(206, 206, 206, 1);
        color: rgba(79, 79, 79, 1);
        font-size: 12px;
        text-align: center;
        font-family: Roboto;
    }

    p {
        position: absolute;
        left: 140px;
        top: 10px;

    }

    #threedian {
        position: absolute;
        left: 340px;
        top: 10px;
        width: 24px;
        height: 24px;
    }
}

.content {
    width: 100vw;
    height: 715px;
    // background-color: red;
    overflow-y: auto;
    .list1 {
        .list2 {
            .block {
                width: 100vw;
                box-sizing: border-box;
                display: flex;
                .r {
                    width: 390px;
                    display: block;
                    .right {
                        display: block;
                        float: right;
                        display: flex;
                        margin-top: 10px;
                        margin-right: 20px;
                        height: 60px;
                        line-height: 60px;

                        img {
                            border-radius: 15px;
                        }
                    }
                }

                .l {
                    .left {
                        display: flex;
                        margin-left: 20px;
                        margin-top: 10px;
                        width: 390px;
                        height: 60px;
                        line-height: 60px;


                        img {
                            border-radius: 15px;
                            margin: 0 5px;
                        }
                    }

                }




            }
        }
    }
}

#input {
    position: absolute;
    display: flex;
    bottom: 0;
    width: 390px;
    height: 86px;
    line-height: 20px;
    background-color: rgba(209, 213, 219, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    font-family: Roboto;
    border: 1px solid rgba(239, 239, 239, 1);

    input {
        margin-left: 53px;
        margin-top: 26px;
        width: 200px;
        height: 40px;
        line-height: 20px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
    }

    #btn {
        width: 34px;
        height: 34px;
        margin-left: 12px;
        margin-top: 30px;
    }

    img {

        width: 34px;
        height: 34px;
        margin-left: 35px;
        margin-top: 30px;
    }

}
</style>